<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li{
            width: 600px;
            line-height: 10px;
            margin: 10px 0px;
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
    <script src="./jquery-1.8.3.min.js"></script>
    <script>
        $(function(){
            // $('*').css('border', '5px solid #f00');
            // $('.item').css('border', '5px solid #f00');
            // $('.item,p,h1,#list').css('border', '5px solid #f00');
            // $('#list li').css('border', '5px solid #f00');
            // $('#list > li').css('border', '5px solid #f00');
            // $('.item + li').css('border', '5px solid #f00');
            // $('.item ~ li').css('border', '5px solid #f00');
            
            // $('#list li:first').css('border', '5px solid #f00');
            // $('#list li:last').css('border', '5px solid #f00');
            // $('#list li:eq(2)').css('border', '5px solid #f00');
            // $('#list li:eq(3)').css('border', '5px solid #f00');
            

            // $('li:contains("艳艳")').css('border', '5px solid #f00');
            // $('#list li:has(".item")').css('border', '5px solid #f00');

            // $('#list li').css('border', '5px solid #f00');
            // $('#list li:parent').css('border', '5px solid #f00');
            
            // $('#list li:empty').css('border', '5px solid #f00');

            // $("#imglist [width='250']").css('border', '5px solid #f00');
            // $("#imglist [width]").css('border', '5px solid #f00');
            // $("#imglist [alt!='t4']").css('border', '5px solid #f00');
            // $("#imglist [title^='p']").css('border', '5px solid #f00');
            // $("#imglist [title$='2']").css('border', '5px solid #f00');
            // $("#imglist [title*='i']").css('border', '5px solid #f00');
            $("img[width][title*='i'][title$='2'][title^='p']").css('border', '5px solid #f00');

            $('#list li:first-child').css('border', '5px solid #f00');
        });
    </script>
</head>
<body>
    <h1>jQuery 选择器</h1>
    <hr>

    <div id="imglist">
        <img src="./imgs/1.jpg" alt="t1" width="200" height="300" title="pic1">
        <img src="./imgs/2.jpg" alt="t2" width="200" height="300" title="pic2">
        <img src="./imgs/3.jpg" alt="t3" height="300" title="img1">
        <img src="./imgs/4.jpg" alt="t4" width="200" height="300" title="img2">
        <img src="./imgs/5.jpg" alt="t5" width="200" height="300" title="tu1">
    </div>
    
    <ul id="list">
        <li>小静静 和我 去钓鱼</li>
        <li></li>
        <li>
            小艳艳 和我 去看电影
            <ul>
                <li>小静静 和我 去钓鱼</li>
                <li>小哈哈 和我 去跳舞</li>
                <li>小艳艳 和我 去看电影</li>
                <p class="item">我不是小艳艳!</p>
                <li>小艳艳1 和我 去看电影</li>
                <li>小艳艳2 和我 去看电影</li>
                <li>小艳艳3 和我 去看电影</li>
            </ul>
        </li>
        <li>小艳艳1 和我 去看电影</li>
        <li class="item">小艳艳2 和我 去看电影</li>
        <li>小艳艳3 和我 去看电影</li>
    </ul>

    <hr>
    <ul>
        <li>小静静 和我 去钓鱼</li>
        <li>小哈哈 和我 去跳舞</li>
        <li>
            小艳艳 和我 去看电影
            <ul>
                <li>小静静 和我 去钓鱼</li>
                <li>小哈哈 和我 去跳舞</li>
                <li>小艳艳 和我 去看电影</li>
                <p>我不是小艳艳!</p>
                <li>小艳艳1 和我 去看电影</li>
                <li>小艳艳2 和我 去看电影</li>
                <li>小艳艳3 和我 去看电影</li>
            </ul>
        </li>
        <li>小艳艳1 和我 去看电影</li>
        <li>小艳艳2 和我 去看电影</li>
        <li>
            小艳艳3 和我 去看电影
            <ul>
                <li>小静静 和我 去钓鱼</li>
                <li>小哈哈 和我 去跳舞</li>
                <li>小艳艳 和我 去看电影</li>
                <p>我不是小艳艳!</p>
                <li>小艳艳1 和我 去看电影</li>
                <li>小艳艳2 和我 去看电影</li>
                <li>小艳艳3 和我 去看电影</li>
            </ul>
        </li>
    </ul>

    <hr>
    <ul>
        <li>小静静 和我 去钓鱼</li>
        <li>小哈哈 和我 去跳舞</li>
        <li>小艳艳 和我 去看电影</li>
        <p>我不是小艳艳!</p>
        <li>小艳艳1 和我 去看电影</li>
        <li>小艳艳2 和我 去看电影</li>
        <li>小艳艳3 和我 去看电影</li>
    </ul>

</body>
</html>